import { useMount } from 'ahooks';
import { Button, Flex, Form, Select } from 'antd';
import { useEffect, useRef, useState } from 'react';

const SceneModal = (props) => {
  // 在这里可以访问传递的数据
  const receivedData = props.data;
  const preview = useRef(null);
  useMount(() => {
    async function init() {
      const setupPreview = async () => {
        if (!preview.current) return;
        const { width, height, x, y } = preview.current.getBoundingClientRect();
        const result = await window.tm?.ipcRenderer.invoke(
          'preview-init-child',
          {
            width,
            height,
            x,
            y,
          },
        );
        preview.style = `flex-basis:${result.height}px!important`;
        return result;
      };

      async function resizePreview() {
        const previewContainer = preview.current;
        if (!previewContainer) return;
        const { width, height, x, y } =
          previewContainer.getBoundingClientRect();
        const result = await window.tm!.ipcRenderer.invoke(
          'preview-bounds-child',
          {
            width,
            height,
            x,
            y,
          },
        );
        previewContainer.style = `flex-basis:${result.height}px!important`;
      }

      const previewSize = await setupPreview();
      if (previewSize) {
        preview.current.innerHTML = '';
      }
      const ro = new ResizeObserver(resizePreview);
      if (preview) {
        ro.observe(preview.current);
      }
    }
    init();
  });
  const [cameraTypeData, setCameraTypeData] = useState([]);
  const [defaultValue, setDefaultValue] = useState('');
  //选中窗口类型数据
  const submit = async (value) => {
    const updateData = {
      sceneName: receivedData.data.sceneName,
      name: receivedData.data.name,
      updateSettings: {
        video_device_id: value,
      },
    };
    console.log('updateSourceSettings', updateData);
    const result = await window.tm?.ipcRenderer.invoke(
      'updateSourceSettings',
      updateData,
    );
    console.log('result', result);
  };

  const getSourceSettings = async () => {
    const result = await window.tm?.ipcRenderer.invoke('getSourceSettings', {
      sceneName: receivedData.data.sceneName,
      name: receivedData.data.name,
    });
    console.log('摄像头设置', result);
    const cameraData: any[] =
      await window.tm?.ipcRenderer.invoke('getALlCameras');
    console.log('获取所有摄像头', cameraData);
    if (cameraData) {
      setCameraTypeData(cameraData);
    }
    if (typeof result.settings.video_device_id !== 'object' && cameraData) {
      setDefaultValue(result.settings.video_device_id);
      submit(result.settings.video_device_id);
    } else {
      setDefaultValue(cameraData[0].value);
      submit(cameraData[0].value);
    }
  };
  useEffect(() => {
    getSourceSettings();
  }, []);

  return (
    <Flex
      gap="middle"
      vertical={'vertical'}
      style={{ height: '100%', backgroundColor: '#2e477e' }}
    >
      <div id="preview" ref={preview} className={'preview'}>
        <div
          style={{
            minWidth: '50%',
            maxWidth: '100%',
            height: '100%',
            textAlign: 'center',
            backgroundColor: '#000000',
          }}
        ></div>
      </div>
      <div
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          flex: '1 1 auto',
          overflowY: 'auto',
        }}
      >
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          style={{ width: '100%' }}
        >
          <Form.Item label="摄像头">
            {
              <Select
                value={defaultValue}
                options={cameraTypeData}
                fieldNames={{
                  value: 'value',
                  label: 'name',
                }}
                onChange={async (value, option) => {
                  setDefaultValue(value);
                  await submit(value);
                }}
              />
            }
          </Form.Item>
        </Form>
      </div>
      <div
        style={{
          width: '100%',
          height: '40px',
          display: 'flex',
          justifyContent: 'flex-end',
          backgroundColor: '#1c295a',
          alignItems: 'center',
        }}
      >
        <Button
          type={'primary'}
          style={{ marginRight: '20px', backgroundColor: '#293d76' }}
          onClick={async () => {
            await window.tm?.ipcRenderer.invoke('closeObsModal');
          }}
        >
          取消
        </Button>
        <Button
          type={'primary'}
          style={{ marginRight: '20px', backgroundColor: '#293d76' }}
          onClick={async () => {
            await window.tm?.ipcRenderer.invoke('closeObsModal');
          }}
        >
          确定
        </Button>
      </div>
    </Flex>
  );
};

export default SceneModal;
